{% extends "main.html" %}

{% block tabs %}
{{ super() }}

<!-- Additional styles for landing page -->
<style>
   .more-box{
    margin-left: 20px;
   }
   .ex-h1{
        font-size: 40px;width: 400px;
    }
    .ex-p{
        font-size: 20px; color: #777288;width: 480px;
    }
    .more-h1{ font-size: 20px;font-weight:900}
    .more-p{
        width: 320px; color: #777288; font-size: 18px;
    }
    .lit-p{
        font-size: 16px; color: #777288; width: 400px;
    }
    .ch-div{
        margin-left: 40px;
    }
    .fol{
        margin: auto;
    }
    /* Application header should be static for the landing page */
    .md-header {
      position: initial;
    }
  
    /* Remove spacing, as we cannot hide it completely */
    .md-main__inner {
      margin: 0;
    }
  
    /* Hide main content for now */
    .md-content {
      display: none;
    }
  
    /* Hide table of contents */
    @media screen and (min-width: 60em) {
      .md-sidebar--secondary {
        display: none;
      }
    }
  
    /* Hide navigation */
    @media screen and (min-width: 76.25em) {
      .md-sidebar--primary {
        display: none;
      }
    }
    @media (max-width:400px) {
    .more_resource{
        flex-direction: column;
        text-align: center;
    }
    .more_resource_reverse{
        flex-direction: column-reverse;
        text-align: center;
    }
    .ex-h1 {
        font-size:20px;text-align: center;width:fit-content;
    }
    .ex-p{
        font-size: 14px; color: #777288;text-align: center;width:fit-content;
    }
    .more_resource .imgimg{
        width: 50px;
        height: 50px;
    }
.more-box{ margin-left:0;}
    .mo-img{
        width: 250px;
        height: 250px;
    }
    .more-h1{ font-size:25px;
    }
    .more-p{
        width:fit-content;
    }
    .lit-p{
        font-size: 14px; color: #777288; width: fit-content;margin:20px;
    }
    .chakli{
        width:275px;
        height: 275px;
        margin-top: 10%;
    }
    .ch-div{
        margin-left: 0;
    }
    .fol{
        margin: auto;
        margin-top:5%;
    }
}
</style>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com"/>
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
    <link href="https://fonts.googleapis.com/css2?family=Inter&display=swap" rel="stylesheet"/>  
    <link rel="icon" type="image/png" href="litmus.svg"/>
    <title>LitmusChaos Experiment Docs</title>
    <style>
        body {
            font-family: 'Inter', sans-serif;
            }
        .md-header {
        background-color: #5b42bc;
    }
        .md-tabs {
        background-color: #5b42bc;
    }
    </style>
</head>

<!-- Header Section -->
<div style="margin: 0%; ">
    <div class="more_resource_reverse" style="display: flex;">
        <div style="margin: auto;justify-content:start;">
            <h1 class="ex-h1">
                Experiments in LitmusChaos
            </h1>
            <p class="ex-p">
                Litmus experiments for chaos injection
            </p>
            <button
                onclick="window.location.href = 'experiments/categories/contents/';"
                style="width: 140px; 
                height: 50px; 
                background: linear-gradient(133.06deg, #7C6AC8 1.78%, #5B44BA 64.41%); 
                color: #FFFFFF; border-radius: 4px; 
                border:1px solid;
                margin-bottom: 30px;
                cursor: pointer;
                font-size: 15px;">
                Start Learning
            </button>
        </div>
        <div style="margin: auto;">
            <img class="mo-img" src="exp-docs-icons/cloud-provider.svg" style="height:400px;" alt="cloud provider" />
        </div>
    </div>

    <!-- More Resource Section -->
    <div style="background-color: #F9FAFC;">
        <div style="padding: 40px; margin: auto;">
            <div class="more_resource" style="display: flex; justify-content: space-between;">
                <div class="more_resource" style="display: flex; margin: auto;">
                    <img style="margin:auto;" class="imgimg" src="exp-docs-icons/faqs.svg" alt="faqs"/>
                    <div class="more-box">
                        <a href="experiments/faq/install"><h1 class="more-h1" style="color: #5b42bc; text-decoration: underline; cursor: pointer;">FAQs</h1></a>
                        <p class="more-p">
                            All common Frequently Asked Questions curated in one place
                        </p>
                    </div>
                </div>
                <div class="more_resource" style="display: flex; margin: auto;">
                    <img style="margin:auto;"  class="imgimg" src="exp-docs-icons/troubleshooting.svg" alt="troubleshooting"/>
                    <div class="more-box">
                        <a href="experiments/troubleshooting/install"><h1 class="more-h1" style="color: #5b42bc; text-decoration: underline; cursor: pointer;">Troubleshooting</h1></a>
                        <p class="more-p">
                            Know more about troubleshooting of common issues
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div style="margin: 0%;">
        <div class="more_resource" style="display: flex; padding:20px 0px">
            <div style="margin: auto;">
                <h3 style="font-size: 22px;">
                    Do you like our Litmus Docs?
                </h3>
                <p class="lit-p">
                    We are always trying to improve our docs. If you like the documentation we would want you to become our stargazer.
                </p>
                <button
                    onclick="window.location.href = 'https://github.com/litmuschaos/litmus';"
                    style="width: 210px;
                    height: 40px; background:
                    linear-gradient(133.06deg, #7C6AC8 1.78%, #5B44BA 64.41%);
                    color: #FFFFFF; 
                    border-radius: 4px; 
                    border:1px solid;
                    cursor: pointer;">
                    <div style="display: inline-flex; margin: -5px;">
                        <img src="exp-docs-icons/github-white.svg" alt="github"/> 
                        <p style="margin-left:10px; font-size: 14px;">Become our stargazer</p> 
                    </div> 
                </button>
            </div>
            <div class="more_resource"  style=" display: inline-flex; margin: auto;">
                <img class="chakli" src="exp-docs-icons/chaos-bird.svg" alt="chaos-bird"  />
                <div class="ch-div">
                    <img src="exp-docs-icons/cncf.svg" alt="cncf" />
                    <p style="text-align: center;font-size: 16px;">
                        We are a <a href="https://www.cncf.io/" target="_", style="color: blue; text-decoration: underline; cursor: pointer;">CNCF</a> Incubating project.</p>
                    </p>
                </div>
            </div>
        </div>
        <hr style="height: 1px; border: 2; border-top: 2px solid #E6E8F0;"/>
        <br>
        <div class="more_resource"  style="display: flex;padding:15px 0px">
            <div style="display: flex;margin: auto">
                <img src="exp-docs-icons/litmus-icon-color.svg" alt="litmus"/>
                <p style="font-size: 14px; margin-top: 15px; margin-left: 10px; color: #777288;"> © 2025 LitmusChaos Authors</p>
            </div>
            <div class="fol" style="display: inline-flex;">
                <p style="font-size: 14px;margin-top:0.5px; color: #777288;"> Follow us on:</p>
                <a target="_" href="https://slack.litmuschaos.io/"><img src="exp-docs-icons/Slack.svg" alt="slack" style="margin-left: 10px;"/></a>
                <a target="_" href="https://github.com/litmuschaos/litmus"><img src="exp-docs-icons/Github.svg" alt="github" style="margin-left: 10px;"/></a>
                <a target="_" href="https://dev.to/t/litmuschaos/latest"><img src="exp-docs-icons/Dev.svg" alt="dev" style="margin-left: 10px;"/></a>
                <a target="_" href="https://twitter.com/LitmusChaos"><img src="exp-docs-icons/Twitter.svg" alt="twitter" style="margin-left: 10px;"/></a>
                <a target="_" href="https://www.youtube.com/channel/UCa57PMqmz_j0wnteRa9nCaw"><img src="exp-docs-icons/Youtube.svg" alt="youtube" style="margin-left: 10px;"/></a>
                <a target="_" href="https://www.linkedin.com/company/litmuschaos"><img src="exp-docs-icons/Linkedin.png" alt="linkedin" style="margin-left: 10px; width: 22px;"/></a>
            </div>
        </div>
    </div>
</div>
{% endblock %}

<!-- Content -->
{% block content %}{% endblock %}

<!-- Application footer -->
{% block footer %}
<div style="padding-bottom: 0px;"></div>
{% endblock %}